/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  DatePickerAndroid,
  TextInput,
  Dimensions
} from 'react-native';
import styled from 'styled-components';
import { Actions } from 'react-native-router-flux';
import { getToken } from '../../../utils/auth';
import { applyTalkHistoryList } from '../../../api/index';
import LinearGradient from 'react-native-linear-gradient';
// import { BoxShadow } from 'react-native-shadow';
import PullLoad from './components/PullAndLoad';

export default class talkHistory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '谈话记录',
      imgUrl: require('../../../assets/work/sportsRankings/backtrack.png'),
      search: '',
      data: [],
      nomore: false,
      pageSize: 0,
      pageNumber: 1,
      params: {
        deptId: '',
        petCreateTime: ''
      },
      token: ''
    };
  }
  async openDatePick() {
    try {
      const { action, year, month, day } = await DatePickerAndroid.open({
        date: new Date()
      });
      if (action !== DatePickerAndroid.dismissedAction) {
        this.setState({
          params: {
            petCreateTime: year + '/' + month + '/' + day
          }
        });
      }
    } catch ({ code, message }) {
      console.error('Cannot open date-picker', message);
    }
  }
  getOrderList(ListNums, pageNumber, fresh, params, token) {
    let nomore;
    applyTalkHistoryList(
      token,
      pageNumber,
      ListNums,
      params.deptId,
      params.petCreateTime
    ).then(res => {
      if (res.code === '0') {
        console.log(res.data.rows);
        const item = res.data.rows;
        if (item.length < ListNums) {
          nomore = true;
        } else {
          nomore = false;
        }
        if (fresh) {
          this.setState({
            data: item,
            nomore: nomore
          });
        } else {
          this.setState({
            data: this.state.data.concat(item),
            nomore: nomore
          });
        }
      } else {
      }
    });
  }
  componentWillMount() {
    const ListNums = this.fullScreenJusting(50);
    this.setState({
      pageSize: ListNums
    });
    this.onEndReachedCalled = false;
    getToken().then(token => {
      this.setState({ token });
      this.getOrderList(ListNums, 1, true, this.state.params, token);
    });
  }

  fullScreenJusting(ItemHeight) {
    const { height } = Dimensions.get('window'); //屏幕高度 宽度
    console.log(height, 100);
    //计算列表个数
    const listNum = (height - 40) / ItemHeight;
    return Math.ceil(listNum);
  }
  _onEndReached = () => {
    if (!this.state.nomore && this.onEndReachedCalled) {
      this.getOrderList(
        this.state.pageSize,
        ++this.state.pageNumber,
        false,
        this.state.params,
        this.state.token
      );
    }
    this.onEndReachedCalled = true;
  };
  _onRefresh() {
    this.setState({ nomore: false, pageNumber: 1 }, () => {
      this.getOrderList(
        this.state.pageSize,
        1,
        true,
        this.state.params,
        this.state.token
      );
    });
  }
  renderItem(item) {
    return (
      <View
        style={{
          width: '100%',
          height: 220,
          borderRadius: 10,
          marginBottom: 20,
          backgroundColor: '#ccc',
          flexDirection: 'row'
        }}>
        <LinearGradient
          style={{
            borderTopLeftRadius: 10,
            borderBottomLeftRadius: 10
          }}
          colors={['#7666FE', '#51B6FC']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}>
          <View style={{ width: 100, height: '100%' }}>
            <ListText>罪犯姓名：</ListText>
            <ListText>罪犯编号：</ListText>
            <ListText>谈话民警：</ListText>
            <ListText>所属部门：</ListText>
            <ListText>谈话类型：</ListText>
            <ListText>谈话时间：</ListText>
            <ListText>谈话时长：</ListText>
            <ListText>录音评估：</ListText>
            <ListText>情绪评估：</ListText>
            <ListText>情绪评估：</ListText>
            <ListText>危险评估：</ListText>
          </View>
        </LinearGradient>
        <View
          style={{
            width: '100%',
            height: '100%',
            backgroundColor: '#fff',
            paddingLeft: 20
          }}>
          <ListValText>罪犯姓名：</ListValText>
          <ListValText>罪犯编号：</ListValText>
          <ListValText>谈话民警：</ListValText>
          <ListValText>所属部门：</ListValText>
          <ListValText>谈话类型：</ListValText>
          <ListValText>谈话时间：</ListValText>
          <ListValText>谈话时长：</ListValText>
          <ListValText>录音评估：</ListValText>
          <ListValText style={{ color: '#FF4300' }}>情绪评估：</ListValText>
          <ListValText style={{ color: '#FF4300' }}>情绪评估：</ListValText>
          <ListValText style={{ color: '#5593FF' }}>危险评估：</ListValText>
        </View>
      </View>
    );
  }
  _keyExtractor = item => item.id;
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.header}>
          <TouchableOpacity onPress={() => Actions.pop()}>
            <View>
              <Image
                source={this.state.imgUrl}
                style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
              />
            </View>
          </TouchableOpacity>
          <View
            style={{
              borderBottomColor: '#EDEDED',
              borderBottomWidth: 1,
              borderBottomStyle: 'dashed',
              flexDirection: 'row',
              justifyContent: 'space-between'
            }}>
            <Text style={{ fontSize: 30, fontWeight: 'bold' }}>
              {this.state.title}
              {this.state.params.petCreateTime}
            </Text>
            <TouchableOpacity
              onPress={() => {
                console.log('show');
                DatePickerAndroid.open().then(this.openDatePick());
              }}>
              <Image
                source={require('../../../assets/work/eduTotal/darly.png')}
                style={{ width: 16, height: 17.33, marginTop: 15 }}
              />
            </TouchableOpacity>
          </View>
        </View>
        <View
          style={{
            backgroundColor: '#fff',
            paddingLeft: 15,
            paddingRight: 15
          }}>
          <View style={{ flexDirection: 'row', marginBottom: 15 }}>
            <TextInput
              style={{
                width: '70%',
                height: 40,
                padding: 0,
                paddingLeft: 15,
                backgroundColor: '#f6f6f6',
                borderRadius: 2
              }}
              onChangeText={val => {
                this.setState({ params: { deptId: val } });
              }}
              multiline={true}
              inlineImageLeft="search_icon"
              value={this.state.params.search}
              placeholder="搜索"
              underlineColorAndroid="transparent"
            />
            <CustomLinearGradient
              colors={['#51B6FC', '#7666FE']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}>
              <OnTouchableOpacity
                style={{
                  width: 100,
                  height: 40
                }}
                onPress={() => {
                  //   Actions.talkTotal();
                  this.getOrderList(
                    this.state.pageSize,
                    1,
                    true,
                    this.state.params,
                    this.state.token
                  );
                  console.log('12321');
                }}>
                <Text
                  style={{
                    width: 100,
                    color: '#fff',
                    fontSize: 16,
                    textAlign: 'center'
                  }}>
                  搜索
                </Text>
              </OnTouchableOpacity>
            </CustomLinearGradient>
          </View>
          <View
            style={{ width: '100%', height: '100%', backgroundColor: '#fff' }}>
            <PullLoad
              data={this.state.data}
              keyExtractor={this._keyExtractor}
              onEndReached={this._onEndReached}
              nomore={this.state.nomore}
              renderItem={this.renderItem.bind(this)}
              onRefresh={this._onRefresh.bind(this)}
            />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: 98,
    backgroundColor: '#FFFFFF',
    padding: 19.33
  },
  listConten: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    height: 50
  }
});
const OnTouchableOpacity = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;
const CustomLinearGradient = styled(LinearGradient)`
  margin-left: 14;
  border-radius: 10.67;
`;
const ListText = styled(Text)`
  width: 100%;
  text-align: center;
  color: #fff;
`;
const ListValText = styled(Text)`
  width: 100%;
  text-align: left;
  color: #000;
`;
